var panels = [{
    id : 'p1',
    title : 'Tutorials',
    height : 200,
    collapsible : true,
    href : ''
}, {
    id : 'p2',
    title : 'Clock',
    height : 200,
    content : 'sfdsfds'
}, {
    id : 'p3',
    title : 'PropertyGrid',
    height : 200,
    collapsible : true,
    closable : true,
    content : 'sfdsfds'
}, {
    id : 'p4',
    title : 'DataGrid',
    height : 200,
    closable : true,
    content : 'sfdsfds'
}, {
    id : 'p5',
    title : 'Searching',
    height : 200,
    content : 'sfdsfds'
}, {
    id : 'p6',
    title : 'Graph',
    height : 200,
    content : 'sfdsfds'
}, {
    id : 'p7',
    title : 'Graph',
    content : 'sfdsfds'
}, {
    id : 'p8',
    title : 'Graph',
    height : 200,
    content : 'sfdsfds'
}, {
    id : 'p9',
    title : 'Graph',
    content : 'sfdsfds'
}, {
    id : 'p10',
    title : 'Graph',
    height : 200,
    content : 'sfdsfds'
}];

function getPanelOptions(id) {
    for (var i = 0; i < panels.length; i++) {
        if (panels[i].id == id) {
            return panels[i];
        }
    }
    return undefined;
}

function getPortalState() {
    var aa = [];
    for (var columnIndex = 0; columnIndex < 3; columnIndex++) {
        var cc = [];
        var panels = $('#homePortal').portal('getPanels', columnIndex);
        for (var i = 0; i < panels.length; i++) {
            cc.push(panels[i].attr('id'));
        }
        aa.push(cc.join(','));
    }
    return aa.join(':');
}

function addPanels(portalState) {
    var columns = portalState.split(':');
    for (var columnIndex = 0; columnIndex < columns.length; columnIndex++) {
        var cc = columns[columnIndex].split(',');
        for (var j = 0; j < cc.length; j++) {
            var options = getPanelOptions(cc[j]);
            if (options) {
                var p = $('<div/>').attr('id', options.id).appendTo('body');
                p.panel(options);
                $('#homePortal').portal('add', {
                    panel : p,
                    columnIndex : columnIndex
                });
            }
        }
    }
}

$(function() {
    $('#homePortal').portal({
        fit : true,
        border : false,
        onStateChange : function() {
            var state = getPortalState();
            var date = new Date();
            date.setTime(date.getTime() + 24 * 3600 * 1000);
            document.cookie = 'portal-state=' + state + ';expires=' + date.toGMTString();
        }
    });
    var state = $.util.cookie('portal-state');
    if (!state) {
        state = 'p1,p2,p7:p3,p4,p8:p5,p6,p9,p10';
    }
    addPanels(state);
    setTimeout("$('#homePortal').portal('resize')", 100);
    //$('#homePortal').portal('resize');
});
